iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0

來輕鬆聊聊

本單元可以視為CSS基礎介紹的進階內容,相對於基礎篇會提供更多實用的且更接近實際網頁開發的範例。接下來就讓我們開始吧!


文字對齊

  • text-aling可以將文字水平對齊,依據不同的值會有不同的效果。
    • text-align: justify;可以使文字在行內平均分散,左右貼齊邊緣,原有的空格可能會被放大。
    • text-align: center;會使文字以中央垂直線為準,左右半邊相互對稱。
    • text-align: left;預設值,為靠左對齊。
    • text-align: right;為靠右對齊,即為預設值的相反方向。

範例

<!-- HTML -->
<div id="box">
  <h2 id="title">Jacky's Blog</h2>
  <p id="date">2021/1/1</p>
  <p id="content">今天學習到如何將文字對齊,可以靠左對齊、靠右對齊、置中對齊、平均分散。</p>
  <a href="#">聯絡我</a>
</div>
<!-- CSS -->
#box {
  height: 200px;
  width: 200px;
  border: 1px solid;
  padding: 10px;
}
#title {
  text-align: center;
}
#date {
  text-align: right;
}
#content {
  text-align: justify;
}

顯示效果如下

https://ithelp.ithome.com.tw/upload/images/20210909/20141326VE9eQgeeNb.jpg

文字效果標籤

  • 除了能用CSS來改變文字的外觀,也有一些HTML標籤能直接產生效果。接續上個範例,請注意與原來的差異。
    • <strong>標籤使文字變為粗體。
    • <u>標籤為文字加上底線,u為underline的縮寫。
    • <em>標籤使文字變為斜體。
    • <s>標籤會在文字上加上刪除線。

範例

<div id="box">
  <h2 id="title"><u>Jacky's Blog</u></h2>
  <p id="date"><strong>2021/1/1</strong></p>
  <p id="content">今天學習到如何將文字對齊,可以<s>靠左對齊、靠右對齊</s>、置中對齊、平均分散。</p>
  <a href="#"><em>聯絡我</em></a>
</div>

顯示效果如下

https://ithelp.ithome.com.tw/upload/images/20210909/201413265CEMQCJ8xL.jpg

水平線、空格

  • <hr>為horizontal rule的縮寫,意思為水平分隔線,沒有結束標籤。
  • <br>為blank rule的縮寫,用來加上空格,沒有結束標籤。

範例

<h1>Title</h1>
<hr />
<h3>Chapter</h3>
<p>contentcontentcontentcontentcontentcontentcontentcontentcontent</p><br />
<p>contentcontentcontentcontentcontentcontentcontentcontentcontent</p>
<p>contentcontentcontentcontentcontentcontentcontentcontentcontent</p>

顯示效果如下

https://ithelp.ithome.com.tw/upload/images/20210909/20141326Wx5Noq4t5H.jpg

區塊陰影

  • 若在網頁中,想要一些區域有一點立體感,可以使用box-shadow這個CSS屬性,為其加上陰影。根據屬性值的不同,會產生不同的效果。屬性值依序為:
    • offset-x屬性值為水平方向產生陰影,正值為向右,負值為向左,單位為距離,可以為0。
    • offset-y屬性值為垂直方向產生陰影,正值為向下,負值為向上,單位為距離,可以為0。
    • blur-radius為模糊程度,單位為距離,不允許負值。可以不做設定,優先性大於spread-radius
    • spread-radius為擴散程度,單位為距離,正值為擴大陰影,負值為縮小,預設為0,可以不做設定。
    • color屬性值決定陰影的顏色。

範例

<!-- HTML -->
<div id="box">
  <h2 id="title">Jacky's Blog</h2>
  <p id="date">2021/1/1</p>
  <p id="content">今天學習到如何將文字對齊,可以靠左對齊、靠右對齊、置中對齊、平均分散。</p>
  <a href="#">聯絡我</a>
</div>
<!-- CSS -->
#box {
  height: 200px;
  width: 200px;
  border: 1px solid;
  padding: 10px;
  box-shadow: 10px 15px 20px olive;
  // 給2個值依序為offset-x, offset-y
     給3個值依序為offset-x, offset-y, blur-radius
     給4個值依序為offset-x, offset-y, blur-radius, spread-radius
}
#title {
  text-align: center;
}
#date {
  text-align: right;
}
#content {
  text-align: justify;
}

顯示效果如下

https://ithelp.ithome.com.tw/upload/images/20210909/20141326WPCqktoeDZ.jpg


內容來源:
freeCodeCamp|CodePen


上一篇
CSS基礎介紹(3)
下一篇
視覺設計(2)
系列文
從freeCodeCamp進入前端宇宙9
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言